<script setup>
import { computed } from 'vue'
import { useAudioStore } from '@/stores/audioStore.js'
import { usePlayListStore } from '@/stores/playListStore'
import { isLikeMusicAPi } from '@/apis/song.js'
import { ElMessage } from 'element-plus'
import ListCardCollect from './components/ListCardCollect.vue'


const props = defineProps({
  song: {
    type: Object
  },
  index: {
    type: Number
  },
  isMy: {
    type: Boolean,
    default: false
  },
  privilege: {
    type: Object,
    default: () => {
      return {
        flLevel: false
      }
    }
  }
})

const useAudio = useAudioStore()
const emits = defineEmits(['play'])
// 播放歌曲
const playSong = async () => {
  await useAudio.getSongUrl(props.song, props.index)
  useAudio.audioRef.play()
  // 将目前获取的歌单保存至播放列表
  useAudio.activeSongList = useAudio.allSongList
  // 点击播放歌曲时，向父组件触发 play 事件
  emits('play')
}

// 判断是否在播放当前歌曲
const isPlay = computed(() => props.song.id === useAudio.songResult.id)

const usePlayList = usePlayListStore()
// 是否为喜欢的音乐
const isLike = computed({
  set(value) {
    usePlayList.likeListContent.push({ id: value })
  },
  get() {
    // 在‘喜欢音乐’列表中查找当前接收的歌曲进，判断其是否在喜欢列表内。
    // 坑，两个列表的内容过多时，重复比较，导致滚动查看列表时出现卡顿，会考虑去掉
    return usePlayList.likeListContent.find(item => item.id === props.song.id)
  }
})

// 添加与取消喜欢音乐
// 添加操作会修改本地的‘喜欢的音乐’列表，取消操作会重新获取‘喜欢的音乐’列表
const addAndcancelLike = async (type) => {
  const { data } = await isLikeMusicAPi(props.song.id, type)
  if (data.code !== 200) return ElMessage('操作失败，请保持登录状态。')
  if (type) {
    isLike.value = props.song.id
    ElMessage({
      type: 'success',
      message: '成功添加至喜欢的音乐'
    })
  } else {
    usePlayList.getLikeListContent()
    ElMessage({
      type: 'success',
      message: '已取消喜欢'
    })
  }
}

</script>

<template>
  <li class="song-list-card" @click="playSong">
    <!-- 歌曲信息（图片、歌手 -->
    <div class="song-info">
      <span class="index">{{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }}</span>
          <img v-lazy-image="song.al.picUrl || song.al.extProperties.picUrl + '?param=200y200'" class="userImg">
          <div class="song-name-info">
            <span class="song-name"> {{ props.song.name }}</span>
            <span class="vip-tips" v-if="privilege.flLevel === 'none'">
              vip
            </span>
          </div>
          <span class="song-author">
            {{ song.ar[0].name }} - {{ song.al.name }}
          </span>
    </div>
    <!-- / 歌曲信息（图片、歌手 -->

    <!-- 时长或播放中 -->
    <span class="song-time cyan-tips" v-if="isPlay && useAudio.playStaus === true">播放中</span>
    <span class="song-time cyan-tips" v-else-if="isPlay && useAudio.playStaus === false">暂停中</span>
    <span class="song-time" v-format-millisec="song.dt" v-else></span>
    <!-- / 时长或播放中 -->

    <!-- 喜欢或不喜欢的图标 -->
    <slot>
      <span class="iconfont icon-xihuan purple-tips" @click.stop="addAndcancelLike(false)" v-if="isLike"></span>
      <span class="iconfont icon-xihuan" @click.stop="addAndcancelLike(true)" v-else></span>
    </slot>
    <!-- / 喜欢或不喜欢的图标 -->

    <!-- 编辑弹框 -->
    <ListCardCollect :songId="props.song.id" :isMy="props.isMy" />
    <!-- / 编辑弹框 -->
  </li>
</template>

<style scoped lang='scss'>
.song-list-card {
  margin: 10px 0px;
  color: $assistText;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 40px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;

  &:hover {
    box-shadow: 0px 4px 4px rgba(164, 164, 164, 0.2);
  }

  .song-info {
    display: flex;
    align-items: center;

    .song-name-info {
      display: flex;
      align-items: center;
      margin-left: 10px;
      width: 230px;

      .song-name {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }

      .vip-tips {
        margin-left: 5px;
        line-height: 15px;
        width: 25px;
        text-align: center;
        font-size: 12px;
        color: #8867f2;
        border: 1px solid #8867f2;
        border-radius: 3px;
      }
    }

  }

  span {
    display: block;
  }

  .index {
    width: 40px;
  }

  .userImg {
    height: 50px;
    width: 50px;
    border-radius: 50%;
  }

  .song-author {
    margin-left: 50px;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .song-time {
    letter-spacing: 1px;
    width: 50px;
    text-align: center;
  }

  .cyan-tips {
    color: #1dc779;
  }

  .purple-tips {
    color: #8867f2
  }

  .icon-xihuan {
    font-size: 20px;
  }

}
</style>